<template>
  <div class="wrapper">
    <section class="data-operates data-operates-top">
      <Form ref="filterForm" :model="filterForm" :label-width="105">
        <div class="input-group">
          <FormItem label="Status" prop="status" class="item-status">
            <CheckboxGroup v-model="filterForm.status">
              <Checkbox label="Stock Confirmed"></Checkbox>
              <Checkbox label="Backordered"></Checkbox>
              <Checkbox label="Size Discontinued"></Checkbox>
              <Checkbox label="Model Discontinued"></Checkbox>
              <Checkbox label="Color Discontinued"></Checkbox>
            </CheckboxGroup>
          </FormItem>
        </div>
        <div class="input-group clearfix">
          <FormItem label="Create Date" class="item">
            <DatePicker type="datetimerange" v-model="filterForm.createDate" format="yyyy-MM-dd" placeholder="From: YYYY-MM-DD   To: YYYY-MM-DD" style="width: 300px"></DatePicker>
          </FormItem>
          <FormItem label="Confirrmed Date" class="item">
            <DatePicker type="datetimerange" v-model="filterForm.confirmedDate" format="yyyy-MM-dd" placeholder="From: YYYY-MM-DD   To: YYYY-MM-DD" style="width: 300px"></DatePicker>
          </FormItem>
        </div>
        <div class="input-group clearfix">
          <FormItem label="Tag" prop="tag" class="item">
            <Input v-model="filterForm.tag" placeholder="Enter something..." style="width: 200px"></Input>
          </FormItem>
          <FormItem label="UPC" prop="UPC" class="item">
            <Input v-model="filterForm.UPC" placeholder="Enter something..." style="width: 200px"></Input>
          </FormItem>
          <FormItem label="From PO" prop="fromPO" class="item">
            <Input v-model="filterForm.fromPO" placeholder="Enter something..." style="width: 200px"></Input>
          </FormItem>
        </div>

        <FormItem>
          <Button type="primary" size="large" @click="formSubmit('filterForm')">Go</Button>
          <Button size="large" style="margin-left: 8px" @click="formReset('filterForm')" >Reset</Button>
        </FormItem>
      </Form>
    </section>
    <section class="pagination-wrapper clearfix">
      <div class="cnt-left">
        <Page :total="totalItems" :current="curPage" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
      </div>
      <div class="cnt-right">
        <p class="items-remain" v-show="confirmedDada">Results <span>{{totalItems}}</span></p>
      </div>

      <section class="table-size">
        <div class="table-size-cnt">
          Table size
          <Radio-group v-model="tableSize" type="button">
            <Radio label="large">large</Radio>
            <Radio label="default">medium(default)</Radio>
            <Radio label="small">small</Radio>
          </Radio-group>
        </div>
      </section>
    </section>
    <section class="data-list">
      <Table border no-data-text :size="tableSize" :loading="tableDataloading" ref="waitToConfirm" :columns="tableColumns" :data="confirmedDada" v-if="confirmedDada.length"></Table>
      <div v-show="notableDataTip">
        <Alert type="warning" class="no-data-alter">
          A warning prompt
          <template slot="desc">
            No data for confirmed!!
          </template>
        </Alert>
      </div>
    </section>
    <section class="pagination-wrapper clearfix">
      <div class="cnt-left">
        <Page :total="totalItems" :current="curPage" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
      </div>
      <div class="cnt-right">
        <p class="items-remain" v-show="confirmedDada">Results <span>{{totalItems}}</span></p>
      </div>
    </section>
  </div>
</template>

<script>
  import { modalInstance } from '@/components/mixin';
  import { getSupplierPO, searchConfirmedItems } from '@/api/index';
  export default {
  	name: 'Confirmed',
    mixins: [ modalInstance ],
    data () {
  		return {
        tableDataloading: true,
        notableDataTip: false,
        tableSize: 'default',
        confirmedDada: [],
        filterForm: {
        	status: [],
          tag: '',
          UPC: '',
          fromPO: '',
          createDate: '',
          confirmedDate: ''
        },
        totalItems: 0,
        curPage: 1,
        pageSize: 10,
        pageSizeOpts: [10, 20, 30, 40, 50],
        tableColumns: [
          {
            title: 'Tag',
            align: 'center',
            fixed: 'left',
            width: 90,
            key: 'tag'
          },
          {
            title: 'UPC',
            align: 'center',
            fixed: 'left',
            minWidth: 125,
            key: 'UPC'
          },
          {
            title: 'From PO',
            align: 'center',
            minWidth: 150,
            key: 'from_PO'
          },
          {
            title: 'Create Date',
            align: 'center',
            minWidth: 150,
            key: 'create_date'
          },
          {
            title: 'Category',
            align: 'center',
            width: 160,
            key: 'category'
          },
          {
            title: 'Brand',
            align: 'center',
            minWidth: 130,
            key: 'brand'
          },
          {
            title: 'Product Code',
            width: 85,
            align: 'center',
            key: 'product_code'
          },
          {
            title: 'Product Name',
            minWidth: 185,
            key: 'product_name'
          },
          {
            title: 'Colour Code',
            width: 80,
            align: 'center',
            key: 'colour_code'
          },
          {
            title: 'Size',
            width: 65,
            align: 'center',
            key: 'size'
          },
          {
            title: 'Order QTY',
            width: 70,
            align: 'center',
            key: 'order_QTY'
          },
          {
            title: 'Exp. QTY',
            width: 70,
            align: 'center',
            key: 'Exp_QTY'
          },
          {
            title: 'Confirmed Date',
            align: 'center',
            minWidth: 150,
            key: 'confirmed_date'
          },
          {
            title: 'Status',
            align: 'center',
            width:170,
            key: 'status_text'
          }
        ]
      }
    },
    created () {
  		this.initTableData();
    },
    methods: {
    	initTableData: function () {
        getSupplierPO('confirmed').then(res => {
          this.$Loading.start();
          let resObj = res.data;
          if (!!resObj) {
            this.$Loading.finish();
            this.tableDataloading = false;
            this.confirmedDada =  resObj.data;
            this.totalItems = this.confirmedDada.length;

            // mock Pagination effect starts
            let dataShowList = [];
            this.confirmedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
            this.confirmedDada = dataShowList;
            // mock Pagination effect ended

          } else {
            this.$Loading.error();
            this.notableDataTip = true;
          }
        });
      },
      formSubmit: function (name) {
      	if (this.filterForm.status.length == 0 && !this.filterForm.tag && !this.filterForm.UPC && !this.filterForm.fromPO) {
          this.$Message.error('Please enter search condition!');
        } else {
          searchConfirmedItems(this.filterForm.UPC).then(res => {
            this.$Loading.start();
            let resData = res.data;
            if(resData.status_code == 1) {
            	this.confirmedDada = resData.data;
              this.$Message.success('Submit success!');
              this.$Loading.finish();
            } else {
              this.$Message.error('Submit fail!');
              this.$Loading.error();
            }
          });
        }
      },
      formReset: function (name) {
        this.filterForm.createDate = '';
        this.filterForm.confirmedDate = '';
        this.$refs[name].resetFields();
        this.initTableData();
      },
      changePage (page) {
        this.curPage = page;

        // mock Pagination effect starts
        let dataShowList = [], startShowIndex = (this.curPage - 1) * this.pageSize;
        getSupplierPO('confirmed').then(res => {
        	let resData = res.data;
          this.confirmedDada = resData.data;
          if (this.curPage == 1) {
            this.confirmedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
          } else {
            this.confirmedDada.forEach((item, index) => {
              if (index < startShowIndex) {
                return
              }
              dataShowList.push(item);
            });
          }
          this.confirmedDada = dataShowList;
        });
        // mock Pagination effect ended
      },
      changePageSize (pageSize) {
        this.pageSize = pageSize;

        // mock Pagination effect starts
        let dataShowList = [], startShowIndex = (this.curPage - 1) * this.pageSize;
        getSupplierPO('confirmed').then(res => {
          let resData = res.data;
          this.confirmedDada = resData.data;
          if (this.curPage == 1) {
            this.confirmedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
          } else {
            this.confirmedDada.forEach((item, index) => {
              if (index < startShowIndex) {
                return
              }
              dataShowList.push(item);
            });
          }
          this.confirmedDada = dataShowList;
        });
        // mock Pagination effect ended
      }
    },
    watch: {
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../../assets/sass/mixin';
  .input-group {
    .item {
      float: left;
      margin-right: 5%;
      margin-bottom: 15px;
    }
    .item-status {
      margin-bottom: 15px;
    }
  }
  .table-size-cnt {
    padding-left: 50px;
  }
  .data-operates-top {
    padding-bottom: 0;
  }
</style>
